<script setup>
import { ref , onMounted , reactive} from 'vue';
import { getSettings , updateSettings } from '@/api';
import { useRouter , useRoute } from 'vue-router';
import { Snackbar } from '@varlet/ui'
import '@varlet/ui/es/snackbar/style/index.js';
import { Dialog } from '@varlet/ui';
import '@varlet/ui/es/dialog/style/index.js';

const router = useRouter();
const $route = useRoute();
const setMap = reactive({
  // 朋友圈点赞
  friend_like_it: false,
  consent_to_join: false
});

onMounted(async ()=>{
  console.log('载入设置');
  let wxid = $route.params.uid ?? false;
  if (!wxid || wxid == undefined || wxid =='') {
    return Dialog({
      title: '获取失败！',
      message: '请返回首页？',
      onConfirm: () => {
        return router.push('/home')
      }
    })
  }
  let r = await getSettings(wxid);
  if (r.code != 200) {
    return Dialog({
      title: r.msg,
      message: '请返回首页？',
      onConfirm: () => {
        return router.push('/home')
      }
    })
  }
  
  setMap.friend_like_it = r?.data?.cofig?.friend_like_it ?? false;
  setMap.consent_to_join = r?.data?.cofig?.consent_to_join ?? false;
});

const showInuptBool = ref(false);

const goBack = () => {
  router.go(-1);
}

function goDetailsComment() {
  router.push({
    path: `/details_comment/${$route.params.uid ?? ''}`
  })
}

async function changeSwitch(key,value) {
  let obj = {};
  obj[key] = value;
  let r = await updateSettings($route.params.uid ?? '', obj);
  if (r.code != 200) {
    return Dialog({
      title: '修改失败！',
      message: r.msg,
    })
  }
  return Snackbar({
    content: '修改成功!',
    duration: 1600
  })
}

</script>
<template>
  <var-back-top :duration="300" /> <!-- 返回顶部 -->
  <var-app-bar title="功能列表" color="#fff" text-color="#000" title-position="center">
    <template #left>
      <var-button
        round
        text
        color="transparent"
        text-color="#000"
        @click="goBack"
      >
        <var-icon name="chevron-left" :size="24" />
      </var-button>
    </template>
  </var-app-bar>
  <div style="padding-top: 10px;">
    <var-cell icon="heart-outline" title="朋友圈点赞">
      <template #extra>
        <var-switch v-model="setMap.friend_like_it" @change="(v)=>{changeSwitch('friend_like_it',v)}"/>
      </template>
    </var-cell>
    <var-cell icon="message-processing-outline" title="朋友圈评论" @click="goDetailsComment">
      <template #extra>
        <var-icon name="chevron-right" />
      </template>
    </var-cell>

    <var-cell icon="weather-cloudy" title="朋友圈转发" @click="()=>{
        router.push({
          path: `/details_reprint/${$route.params.uid ?? ''}`,
        })
      }">
      <template #extra>
        <var-icon name="chevron-right" />
      </template>
    </var-cell>

    <var-cell icon="account-circle-outline" title="自动通过新朋友" @click="()=>{
        router.push({
          path: `/details_transit/${$route.params.uid ?? ''}`,
        })
      }">
      <template #extra>
        <var-icon name="chevron-right" />
      </template>
    </var-cell>

    <var-cell icon="weather-night" title="自动邀请进群">
      <template #extra>
        <var-switch v-model="setMap.consent_to_join" @change="(v)=>{changeSwitch('consent_to_join',v)}"/>
      </template>
    </var-cell>

    <var-cell icon="bell-outline" title="新人进群自动回复" @click="()=>{
        router.push({
          path: `/details_reply/${$route.params.uid ?? ''}`,
        })
      }">
      <template #extra>
        <var-icon name="chevron-right" />
      </template>
    </var-cell>
    <!-- 分割线 -->
    <var-divider>
      <var-icon name="heart-outline" style="margin: 0 16px; color: rgb(41, 121, 255);" />
    </var-divider>

  </div>

</template>

<style scoped>
/* 使用css禁止选中文本 */
* {
    moz-user-select: -moz-none;
    -moz-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
</style>